<template>
	<!-- 首页 我的 测本约车详情页面有使用 主要作用是用于滑动显示透明头部 -->
	<!-- New 基于旧于新 -->
	<view class="index-header">
		<cz-nav :offSet="offsetTop"><a-nabbar :is-back="isBack" :name="title" /></cz-nav>
		<view><slot name="content"></slot></view>
	</view>
</template>

<script>
export default {
	name: 'indexHeader',
	props: {
		//标题
		title: {
			type: String,
			default: ''
		},
		//当前滚动条位置
		offsetTop: {
			type: Number,
			default: 0
		},
		//背景图
		bgImg: {
			type: String,
			default: ''
		},
		//高度
		height: {
			type: [String, Number],
			default: 320
		},
		//是否显示返回显示按钮
		isBack: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		backgroundImage() {
			return this.bgImg || `${this.aliosCdn}/larp/issue-index-${this.currentTheme}/headerBg.png`;
		}
	}
};
</script>

<style lang="scss" scoped>
.top {
	left: 0;
	top: 0;
	right: 0;
}
.title-box {
	@extend .top;
	.header-content {
		@extend .top;
		bottom: 0;
	}
}

.index-header {
	background: linear-gradient(#e4e3f6, #f0f1f5);
}
</style>
